<script>
export default {
    data() {
      return {
        value:1,
        carId:'',
        carname:'',
        itemList: [
      ]
      };

    },
  methods: {
    //   返回按钮，回到上一层
    onCancel(){
      this.$router.go(-1)
    },
    details(carId){
      this.axios.get(`http://localhost:10086/api/cars/cars/getCarByCarId/${carId}`).then(res=>{
        if (res.data.code == 200){
          localStorage.setItem('cars', JSON.stringify(res.data.data))
          this.$router.push('/details')
        }else{
          this.$toast.fail('获取数据失败')
        }
      })

    },
    findCarAll(carId){
      this.axios.get(`http://localhost:10086/api/cars/cars/getCarAllByBrandId/${carId}`).then(res=>{
        if (res.data.code == 200){
          this.itemList = res.data.data
        }else{
          this.$toast.fail('获取数据失败')
        }
      })
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    if (this.user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }
      this.carId = this.$route.query.carId;
      this.carname = this.$route.query.carName;
      console.log(this.carId)
    this.findCarAll(this.carId)
  }
}
</script>

<template>
  <div class="page-container">
    <!-- 遮罩层 -->
    <div class="mask">
      <div class="mask-content">
        <van-icon name="arrow-left" style="margin-left: -400px" @click="onCancel" />
        <h3 style="margin-top: -20px;margin-left: -40px">{{ carname }}</h3>
        <!-- 可以在这里添加更多遮罩层中的内容 -->
      </div>
    </div>
<!--    设置一个空盒子，避免遮罩层和列表重合-->
    <div style="margin-bottom:80px; height: 100px">

    </div>
    <div class="text-box-list">
      <div @click="details(item.carId)" v-for="(item, index) in itemList" :key="index" class="text-box-container">
        <van-text-box type="2">
          <div slot="cover">
            <div v-for="(image, imgIndex) in item.imageUrl" :key="imgIndex" class="cover-image">
              <img :src="image" alt="car image" class="van-text-box__cover">
            </div>
          </div>
          <div slot="title" class="font-size-2 van-color-text-primary flex-align">
            <span class="margin-left4" style="font-size: 20px"><b>{{ item.carModel }}</b></span>
            <van-icon name="location-o" /><span>50公里</span>
          </div>
          <div slot="content" class="font-size-2 van-color-text-secondary flex-align">
            <div class="youliang">
              <van-icon name="sign" /><span>{{ item.fuelLevel }}%油量</span><br>
              <van-rate v-model="value" :count="1" color="orange" />
              <span style="color: orange">4.4({{ item.rating }}评论)</span>
            </div>
            <span style="margin-right: -300px">￥<b>{{ item.pricePerHour }}</b>/小时</span>
          </div>
        </van-text-box>
      </div>
    </div>
    <van-loading size="24px" style="position: fixed;top: 97%;left: 40%;">加载中...</van-loading>
    <div class="recommended-section">
      <div class="car-list">
          <div class="car-info">
          </div>
          <van-icon name="heart-o" class="favorite-icon" />
      </div>
    </div>
  </div>
</template>

<style>
@import "./brandAndCar.css";


</style>